<template>
  <div class="contend">
    <div class="container">
      <!-- <span class="titleColor">结果评测为</span> -->
      <div class="mid">
        <div class="imgBox">
          <img src="~/assets/images/shashou.png" alt="" v-if="point < 90" />
          <img src="~/assets/images/daren.png" alt="" v-else />
        </div>
        <div class="text">
          <span>用时：{{ userTimeText }}</span>
          <span class="ml">分数：{{ point }}分</span>
        </div>
      </div>
      <div class="colorBox">
        <div class="botText">
          <span class="titleColor">结果分析</span>
          <span class="tips"
            >答对 <span class="succColor">{{ rightNum }}题</span></span
          >
          <span class="tips"
            >答错 <span class="errColor">{{ errorNum }}题</span></span
          >
          <span class="tips"
            >漏答
            <span class="ml"
              >{{ questionNum - rightNum - errorNum }}题</span
            ></span
          >
        </div>
      </div>
      <div class="btnBox">
        <span class="btn" @click="backQuestion">重做一次</span>
        <nuxt-link to="/">
          <span class="btn btnother"> 返回首页 </span></nuxt-link
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {};
  },
  async asyncData({ app, query, params }) {
    let {
      sub,
      category,
      group,
      score,
      useminutes,
      useseconds,
      sectionTotal,
      errorNum,
      rightNum,
      questionNum,
    } = { ...query };

    return {
      point: score,
      userTimeText: useminutes+'分'+ useseconds+'秒' ,
      rightNum: rightNum,
      errorNum: errorNum,
      questionNum: questionNum,
      sectionTotal:sectionTotal,
      sub: sub,
      category: category,
      group: group,

    };
  },
  methods: {
    backQuestion() {
      this.$router.replace({
        name: "examination-practice",
        query: {
          sub: this.sub,
          category: this.category,
          categorysub: this.categorysub,
          group:this.group
        },
      });
    },
  },
};
</script>

<style scoped lang='scss'>
@import "~/assets/css/practiceDetails.scss";
</style>